import { Steps, Button, Form, Alert, message } from 'antd';
import { UserOutlined, SolutionOutlined, LoadingOutlined, SmileOutlined } from '@ant-design/icons';
import React, { useMemo } from 'react';
import { history } from 'umi';
import InitForm from '@/components/InitForm';
import { doFetch } from '@/utils/doFetch';

const { Step } = Steps;


const FogotCom = ({ activecolor = "#fff", unactivecolor = "#ccc", type = "1", auto, close }) => {
    const [current, setCurrent] = React.useState(auto ? 1 : 0),
        [info, setInfo] = React.useState({}),
        [checkType, setcheckType] = React.useState(),
        [formRef] = Form.useForm();

    const next = () => {
        if (current == 0) {
            formRef
                .validateFields()
                .then((values) => {
                    doFetch({ url: "/ngic-promote-epauth/epUser/checkUserBeforeRetrieve", params: { ...values, type } }).then(res => {
                        if (res.code == "0000") {
                            setInfo(res.data);
                            setCurrent(current + 1);
                        }
                    })

                })
                .catch((error) => { });
        } else if (current == 1) {
            formRef
                .validateFields()
                .then((values) => {
                    doFetch({ url: "/ngic-promote-epauth/epUser/checkCodeBeforeRetrieve", params: { id: info.id, code: values.code } }).then(res => {
                        if (res.code == "0000") {
                            setCurrent(current + 1);
                        }
                    })
                })
                .catch((error) => { });

        } else {
            formRef
                .validateFields()
                .then((values) => {
                    doFetch({ url: "/ngic-promote-epauth/epUser/retrievePassWord", params: { id: info.id, password: values.password } }).then(res => {
                        if (res.code == "0000") {
                            close && close();
                            message.success("操作成功")
                        }
                    })
                })
                .catch((error) => { });

        }
    };

    const prev = () => {
        setCurrent(current - 1);
    };

    const steps = useMemo(() => {
        if (auto) {
            doFetch({ url: "/ngic-promote-epauth/epUser/checkUserBeforeRetrieve", params: { param: auto, type } }).then(res => {
                if (res.code == "0000") {
                    setInfo(res.data);
                }
            })
            return [
                {
                    title: '获取验证码',
                    content: 'Second-content',
                },
                {
                    title: '修改密码',
                    content: 'Last-content',
                },
            ];
        } else {
            return [
                {
                    title: '用户名',
                    content: 'First-content',
                },
                {
                    title: '获取验证码',
                    content: 'Second-content',
                },
                {
                    title: '修改密码',
                    content: 'Last-content',
                },
            ];
        }



    }, [auto])

    let fields = useMemo(() => {
        if (current == 0) {
            return {
                "param": {
                    "value": null,
                    "type": "input",
                    "title": "用户名",
                    "name": [
                        "param"
                    ],
                    "required": true,
                    "col": { span: 24 }
                },
            }
        } else if (current == 1) {
            return {
                "checkType": {
                    "value": null,
                    "type": "select",
                    "title": "验证方式",
                    "name": [
                        "checkType"
                    ],
                    "required": true,
                    "col": { span: 24 },
                    "options": info.checkWay == "1" ? [
                        {
                            label: "手机",
                            value: 1
                        }
                    ] : [
                        {
                            label: "手机",
                            value: 1
                        },
                        {
                            label: "邮箱",
                            value: 2
                        }
                    ]
                },
                "code": {
                    "value": null,
                    "type": "vrcode",
                    "title": "验证码",
                    "name": [
                        "code"
                    ],
                    "required": true,
                    "col": { span: 24 },
                    mobile: "checkType",
                    extraparams: {
                        id: info.id,
                        checkType: "linked"
                    }
                }
            }
        } else {
            return {
                "password": {
                    "value": null,
                    "type": "password",
                    "title": "密码",
                    "name": [
                        "password"
                    ],
                    "required": true,
                    "col": { span: 24 }
                },
                "confirmpassword": {
                    "value": null,
                    "type": "password",
                    "title": "确认密码",
                    "name": [
                        "confirmpassword"
                    ],
                    "required": true,
                    "col": { span: 24 },
                    checkConfirm: (rule, value) => {
                        if (
                            value &&
                            value !== formRef.getFieldValue('password')
                        ) {
                            return Promise.reject('2次密码不一致！');
                        } else {
                            return Promise.resolve();
                        }
                    },
                },
            }
        }



    }, [current])



    return (
        <>
            <Steps current={current} >
                {
                    auto ? null : <Step status="finish" title={<span style={{ color: current == 0 ? activecolor : unactivecolor }}>{"用户名"}</span>} icon={<UserOutlined style={{ color: current == 0 ? activecolor : unactivecolor }} />} />
                }
                <Step status="finish" title={<span style={{ color: current == 1 ? activecolor : unactivecolor }}>{"获取验证码"}</span>} icon={<SolutionOutlined style={{ color: current == 1 ? activecolor : unactivecolor }} />} />
                <Step status="wait" title={<span style={{ color: current == 2 ? activecolor : unactivecolor }}>{"修改密码"}</span>} icon={<SmileOutlined style={{ color: current == 2 ? activecolor : unactivecolor }} />} />
            </Steps>
            <div className="steps-content">
                {
                    (checkType && current == 1) && <Alert style={{ marginBottom: 26 }} showIcon type="info" message={`您的${checkType == "1" ? "手机号" : "邮箱"}: ${checkType == "1" ? info.telephone : info.mailNo}`}>
                    </Alert>
                }

                <InitForm
                    formRef={formRef}
                    fields={fields || {}}
                    style={{ margin: type == "2" ? 0 : "0 20px 20px 20px" }}
                    onChange={(value) => {
                        if (Object.keys(value)[0] == "checkType") {
                            setcheckType(Object.values(value)[0])
                        }
                    }}
                    actions={() => null}
                >
                </InitForm>


            </div>
            <div className="steps-action">
                {current < (auto ? (steps.length) : (steps.length - 1)) && (
                    <Button type="primary" onClick={() => next()}>
                        下一步
                    </Button>
                )}
                {current === (auto ? (steps.length) : (steps.length - 1)) && (
                    <Button type="primary" onClick={() => next()}>
                        修改密码
                    </Button>
                )}

                {current > (auto ? 1 : 0) && (
                    <Button style={{ margin: '0 8px' }} onClick={() => prev()}>
                        上一步
                    </Button>
                )}
            </div>
        </>
    );
};

export default FogotCom